<template>
    <div class="maind" style="padding-top:40px ;height: calc(100% - 5px);">
        <main>
            <el-header>
                    <span>类别 <em style="color: #90EE90;"> {{ $route.query.categoryName }}</em></span>
                    <span style="margin: 0 20px;">|</span>
                    <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                    @clear="getActivityList()"></el-input>                   
              
                <el-button class="look" size="small" @click="getassignmentList()">查询</el-button>
                <el-button class="add" size="small" @click="addForms()">新增</el-button>
                <el-button class="delet" size="small" @click=" machDelete(selectedRows)" :disabled="esdisabled"
                    :class="{ active: esdisabled == false }">批量删除</el-button>
                    <el-button style="color: #17b3a3; " size="small" 
                    @click="handLook()">返回</el-button>
            </el-header>
            <!-- 数据渲染的列表 -->
            <el-table style="height:calc(100% - 85px);" :data="assignmentList" border :row-style="{ height: '40px' }"
                :cell-style="{ padding: '0px' }" @selection-change="handleSelectionChange" size="mini">

                <!-- 选择框列 -->
                <el-table-column type="selection" width="50"></el-table-column>


                

                
                <el-table-column label="ID" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                        <!-- <img :src="scope.row.photo" alt="" style="width: 35px;height: 35px;"> -->
                    </template>
                </el-table-column>

                <el-table-column label="分类ID" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.row.categoryId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="编码" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.itemCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.itemName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="值" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.itemValue }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="简写码" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.itemShortCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否可用" width="200">
                    <template slot-scope="scope">
                        <!-- <span>{{ scope.row.enabled }}</span> -->
                        <span v-show="scope.row.enabled == '1'">是</span>
                        <span v-show="scope.row.enabled == '2'">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序码" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sortCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handleEdit(scope.row)">修改</el-button>
                        <el-button style="color: #17b3a3; " size="mini" type="text"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <!-- 新增或者编辑 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" :rules="rules" ref="addassignment" label-width="100px" size="mini"
                    class="demo-ruleForm">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="类别">
                                <span style="color: #90EE90;">{{ $route.query.categoryName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="编码">
                                <el-input v-model="addassignment.itemCode" placeholder="编码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称">
                                <el-input v-model="addassignment.itemName" placeholder="名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="值">
                                <el-input v-model="addassignment.itemValue" placeholder="值"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="简写码">
                                <el-input v-model="addassignment.itemShortCode" placeholder="简写码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否可用">
                                <el-radio v-model="addassignment.enabled" label="1">可用</el-radio>
                                <el-radio v-model="addassignment.enabled" label="2">不可用</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="排序码">
                                <el-input-number v-model="addassignment.sortCode" :min="1" :max="100" @change="Age" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                            <el-form-item label="列数">
                                <el-input-number v-model="addassignment.columnNums" :min="1" :max="100" @change="column" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="类型">
                                <el-select v-model="addassignment.encodingType" placeholder="请选择位置码类型">
                                    <el-option v-for="(item, index) in encodingType" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <!-- 分割线 -->
                        <!-- <el-col :span="24">
                            <h6 style="height: 1px; background-color: #DCDFE6; margin: 24px 0 ;"></h6>
                        </el-col> -->


                        

                        <!-- <el-col :span="12">
                            <el-form-item label="存储容器">
                                <el-input v-model="RRRROU.rouqi" style="width: 50%;"></el-input>
                                <el-button type="primary" @click="Rouclick" size="mini">容器选择</el-button>
                            </el-form-item>
                        </el-col> -->
                        <!-- 容器选择框 -->
                        <!-- <el-dialog title="容器选择" :visible.sync="RouqiDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                                @clear="geRouqiList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>

                            <el-table :data="Rouqi" size="mini">
                                <el-table-column label="设备编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="设备名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="型号名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.equipmentModelName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditT(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="RouqiPage.page" :componentTotal="RouqiTatol" @changeRows="setRows"
                                @changePage="setPage">
                            </pagination>
                        </el-dialog> -->

                        
                        

                        

                        <!-- <el-col :span="12">
                            <el-form-item label="规格型号">
                                <el-input v-model="RRRROU.jia" style="width: 50%;"></el-input>
                                <el-button type="primary" size="mini" @click="jiaclick">规格选择</el-button>
                            </el-form-item>
                        </el-col> -->
                        <!-- 架子选择 -->
                        <!-- <el-dialog title="冻存架选择" :visible.sync="JiaDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                                @clear="geJiaList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>

                            <el-table :data="Jia" size="mini">
                                <el-table-column label="编码" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.code }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.shelfTypeName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="容器名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.equipmentName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditTJ(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="JiaPage.page" :componentTotal="JiaTatol" @changeRows="setRows"
                                @changePage="setPage">
                            </pagination>
                        </el-dialog> -->


                        
<!-- 
                        <el-col :span="12">
                            <el-form-item label="宽度">
                                <el-input-number v-model="addassignment.width" :min="1" :max="100" @change="width" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="高度">
                                <el-input-number v-model="addassignment.height" :min="1" :max="100" @change="depth" />
                            </el-form-item>
                        </el-col> -->
                        
                       

                        <!-- <el-col :span="12">
                            <el-form-item label="规格型号">
                                <el-input v-model="RRRROU.he" style="width: 50%;"></el-input>
                                <el-button type="primary" size="mini" @click="Heclick">规格选择</el-button>
                            </el-form-item>
                        </el-col> -->
                        <!-- 盒子选择 -->
                        <!-- <el-dialog title="冻存盒选择" :visible.sync="HeDiago" append-to-body>
                            <el-input placeholder="搜索参数" size="small" clearable v-model="queryInfo.key"
                                @clear="geHeList()" style="width: 150px; margin-right: 15px;"></el-input>
                            <el-button type="primary" size="small">查询</el-button>

                            <el-table :data="He" size="mini">
                                <el-table-column label="名称" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="位置编码" width="180">
                                    <template slot-scope="scope">
                                        <span v-show="scope.row.encodingType == '1'">纯数字</span>
                                        <span v-show="scope.row.encodingType == '2'">混合</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="行数" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.rowNums }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="列数" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.columnNums }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="宽度" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.width }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="高度" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.height }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="100">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEditTJH(scope.row)">选择</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <pagination :page="HePage.page" :componentTotal="HeTatol" @changeRows="setRows"
                                @changePage="setPage">
                            </pagination>
                        </el-dialog> -->


                        

                        <!-- <el-col :span="12">
                            <el-form-item label="是否可用">
                                <el-radio v-model="addassignment.enabled" label="1">可用</el-radio>
                                <el-radio v-model="addassignment.enabled" label="2">不可用</el-radio>
                            </el-form-item>
                        </el-col> -->

                        <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addassignment.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm(sampleCollectList)">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>




            <pagination :page="queryInfo.page" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>


        </main>
    </div>
</template>

<script>
import Pagination from "../Pagination.vue";
export default {
    data() {
        return {
            id: '',
            dialogFormVisible: false,
            esdisabled: true,
            readonly: false,
            total: 0,
            queryInfo: {
                t: '',
                page: 1,
                limit: 10,
                key: '',
                categoryId: this.$route.query.id,
            },
            //信息添加时候弹出的表单数据
            RRRROU: {
                rouqi: '',//容器名称
                jia: '',//冻存架
                he:'',//盒子
            },


            //动态获取到的数据
            assignmentList: [],
            //接口需要上传的数据
            addassignment:{
                    "t": 1729574629565,
                    "categoryId": this.$route.query.id,//ID
                    "parentId": 0,
                    "itemCode": "编码",//编码
                    "itemName": "名称",//名称
                    "itemValue": "值",//值
                    "itemShortCode": "简写码",//简写码
                    "isInput": 1,
                    "isStatistic": 1,
                    "useItemCode": 1,
                    "useItemName": 1,
                    "useItemValue": 1,
                    "enabled": 0,//是否可用
                    "allowEdit": 1,
                    "allowDelete": 1,
                    "sortCode": 9,//排序码
                    "remark": "aaaaa",//备注
                    "createUserId": 0,
                    "createdBy": "",
                    "createdOn": "",
                    "modifiedUserId": 0,
                    "modifiedBy": "",
                    "modifiedOn": ""
                },


            //批量操作的数组
            selectedRows: [],




            //容器数据
            RouqiDiago: false,//容器弹框
            Rouqi: [],//容器数据
            RouqiTatol: 0,//最大页码
            RouqiPage: {//页码树
                page: 1,
                limit: 10,
                k: '',
                t: '',
            },
            //冻存架数据
            JiaDiago: false,//冻存架弹框
            Jia: [],//冻存架数据
            JiaTatol: 0,//最大页码
            JiaPage: {//页码树
                page: 1,
                limit: 10,
                k: '',
                t: '',
                equipmentId: 335,
            },

            //盒子数据
            HeDiago: false,//盒子弹框
            He: [],//盒子数据
            HeTatol: 0,//最大页码
            HePage: {//页码树
                page: 1,
                limit: 10,
                k: '',
                t: '',
            },

            rules: {
                code: [
                    { required: true, message: "任务编码不能为空", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "任务名称不能为空", trigger: "blur" },
                ],
            },
            encodingType: [
                { label: "纯数字", value: "1" },
                { label: "混合", value: "2" },
            ],
        }
    },
    methods: {
        //容器的查询
        async geRouqiList() {
            this.RouqiPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/equipment/list", {
                params: this.RouqiPage
            })
            // console.log(res);
            this.Rouqi = res.page.list;
            // console.log(this.assignmentList);
            this.RouqiTatol = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取容器列表失败");
        },
        //容器的选择
        handleEditT(row) {
            // console.log(row);
            this.RRRROU.rouqi = row.name;
            this.addassignment.equipmentId = row.id;
            this.JiaPage.equipmentId = row.id;
            this.RouqiDiago = false;
        },
        //容器弹出框
        Rouclick() {
            this.RouqiDiago = true;
            this.geRouqiList();
        },
        //----------------------------------------------------------------------------------------------------------------
        //冻存架查询
        async geJiaList() {
            this.JiaPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/forzenshelf/list", {
                params: this.JiaPage
            })
            this.Jia = res.page.list;
            this.JiaTatol = res.page.totalCount;
        },
        //架子的选择
        handleEditTJ(row) {
            // console.log(row);
            this.RRRROU.jia = row.code;
            this.addassignment.shelfId = row.id;
            this.addassignment.rowNo = row.rowNo;
            this.addassignment.columnNo = row.columnNo;
            this.JiaDiago = false;
        },
        //冻存架弹出框
        jiaclick() {
            this.JiaDiago = true;
            this.geJiaList();
        },
        //--------------------------------------------------------------------------------------------------------------
        //盒子查询
        async geHeList() {
            this.JiaPage.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/forzenboxtype/list", {
                params: this.HePage
            })
            this.He = res.page.list;
            this.HeTatol = res.page.totalCount;
        },
        //盒子的选择
        handleEditTJH(row) {
            // console.log(row);
            this.RRRROU.he = row.name;
            this.addassignment.boxTypeId = row.id;
            this.addassignment.boxTypeName = row.name;
            this.addassignment.rowNums = row.rowNums;
            this.addassignment.columnNums = row.columnNums;
            this.HeDiago = false;
        },
        //盒子弹出框
        Heclick() {
            this.HeDiago = true;
            this.geHeList();
        },
        














        


        //初始化数据
        addForms() {
            this.id = '';
            this.addassignment = {
                "t": 1729574629565,
                    "categoryId": this.$route.query.id,//ID
                    "parentId": 0,
                    "itemCode": "",//编码
                    "itemName": "",//名称
                    "itemValue": "",//值
                    "itemShortCode": "",//简写码
                    "isInput": 1,
                    "isStatistic": 1,
                    "useItemCode": 1,
                    "useItemName": 1,
                    "useItemValue": 1,
                    "enabled": 0,//是否可用
                    "allowEdit": 1,
                    "allowDelete": 1,
                    "sortCode": 1,//排序码
                    "remark": "",//备注
                    "createUserId": 0,
                    "createdBy": "",
                    "createdOn": "",
                    "modifiedUserId": 0,
                    "modifiedBy": "",
                    "modifiedOn": ""
            };
            this.dialogFormVisible = true;
        },
        // 获取任务列表
        async getassignmentList() {
            this.queryInfo.t = new Date().getTime()
            const { data: res } = await this.axios.get("api/biosample/sysitemdetails/list", {
                params: this.queryInfo
            })
            // console.log(res);
            this.assignmentList = res.page.list;
            // console.log(this.assignmentList);
            this.total = res.page.totalCount;//最大页数
            if (res.code != 0) return this.$message.error("获取任务列表失败");
        },
        //添加新增
        async addForm() {
            const { data: res } = await this.axios.post("api/biosample/sysitemdetails/save", this.addassignment);
            if (res.code != 0) return this.$message.error("新增失败");
            this.$message.success("新增成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        // 表格回显
        async handleEdit(row) {
            // console.log(row);
            this.dialogFormVisible = true;
            this.id = row.id;
            this.addassignment.t = new Date().getTime();
            const { data: res } = await this.axios.get(`api/biosample/sysitemdetails/info/${this.id}`, this.addassignment.t);
            this.addassignment = res.sysItemdetails ;
        },
        //修改的接口
        async editForm() {
            const { data: res } = await this.axios.post("api/biosample/sysitemdetails/update", this.addassignment);
            if (res.code != 0) return this.$message.error("修改失败");
            this.$message.success("修改成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //单个删除
        handleDelete(row) {
            // console.log(row);
            this.$confirm(`是否删除[${row.id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteTeam(row.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async deleteTeam(id) {
            const { data: res } = await this.axios.post(`api/biosample/sysitemdetails/delete`, [id]);
            if (res.code != 0) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        // 分页器
        setRows(val) {
            this.queryInfo.limit = val;
            this.getassignmentList();
            this.RouqiPage.limit = val;
            this.geRouqiList();
            this.JiaPage.limit = val;
            this.geJiaList();
            this.HePage.limit = val;
            this.geHeList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
            this.RouqiPage.page = val;
            this.geRouqiList();
            this.JiaPage.page = val;
            this.geJiaList();
            this.HePage.page = val;
            this.geHeList();
        },
        //批量删除
        handleSelectionChange(selection) {
            // this.selectedRows = selection;
            // console.log('Selected Rows:', this.selectedRows);
            this.selectedRows = selection.map(item => item.id);
            // console.log( this.selectedRows);
            if (this.selectedRows.length > 0) {
                this.esdisabled = false
            } else {
                this.esdisabled = true
            }

        },
        machDelete(id) {
            // console.log(row);
            this.$confirm(`是否删除[${id}]数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.handledeleteTeam(id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async handledeleteTeam(id) {
            const { data: res } = await this.axios.post(`api/biosample/sysitemdetails/delete`, id);
            if (res.code != 0) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //明细管理跳转路由传参
        handLook(){
            this.$router.push('/home/basics/dictionaries')
        },
        //取消操作
        resetForm() {
            this.addForms();
            this.dialogFormVisible = false;
        },
        //加减框
        //层
        Age(val) {
            this.addassignment.sortCode = val;
        },
        //列
        column(val) {
            this.addassignment.columnNums = val;
        },
        //宽
        width(val) {
            this.addassignment.width = val;
        },
        //深
        depth(val) {
            this.addassignment.height = val;
        },
    },
    mounted() {
        this.getassignmentList()
    },
    components: {
        Pagination
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
    text-align: center;
}

main {

    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.el-header {
    padding: 0;
    float: left;
    width: 100%;
    ;

    .el-input {
        width: 185px;
        margin-right: 15px;
    }

    .delet {
        color: #fff;
        background-color: #fab6b6;
        border-color: #fab6b6;
    }

    .active {
        color: #fff;
        background-color: #f56c6c;
        border-color: #f56c6c;
    }

    .add {
        color: #fff;
        background-color: #17b3a3;
        border-color: #17b3a3;
    }
}
</style>